@use 'sass:math';
// $base-font-size: 16px !default;

// @use '@/utils/util.scss' as util with($base-font-size: 16);
@function em($px, $base-font-size: $base-font-size) {
    @return math.div($px, $base-font-size) * 1em;
}

// desc: 文字一行超出显示省略号
// 用 extend 是不是更好？
@mixin ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// desc: 扩展点击区域
// 可选参数 $color  ? ?  @if  null
@mixin expand-click($num : 5) {
    // position: relative;

    // &:hover {
    //     color: $color;
    // }

    &:active {
        transform: scale(0.9);
    }

    // 注意有些字体图标是用伪类实现的，避免冲突。
    &::after {
        content: '';
        cursor: pointer;
        position: absolute;
        top: -#{$num}px;
        left: -#{$num}px;
        right: -#{$num}px;
        bottom: -#{$num}px;
    }
}